<template>
  <div class="page">
    <el-pagination
      v-if="total > 0"
      background
      @size-change="handleSizeChange"
      @current-change="changePage"
      :current-page="num"
      :page-sizes="pageAry"
      :page-size="size"
      :layout="'total, sizes, prev, pager, next, jumper'"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'pageCom',
  msg: '',
  props: {
    searchParams: {
      type: Object,
      default: function() {
        return {
          // 搜索条件
          pageNum: 1, // 当前页数
          pageSize: 10 // 页面显示条数
        }
      }
    },
    pageName: {
      type: Array,
      default: function() {
        return ['pageNum', 'pageSize']
      }
    },
    pageAry: {
      type: Array,
      default: function() {
        return [10, 25, 50]
      }
    },
    total: {
      type: Number,
      default: 0
    }
  },
  computed: {
    num() {
      return this.searchParams[this.pageName[0]]
    },
    size() {
      return this.searchParams[this.pageName[1]]
    }
  },
  watch: {
    total() {
      if (this.total === (this.num - 1) * this.size && this.total !== 0) {
        let page = this.searchParams[this.pageName[0]] - 1
        this.changePage(page)
      }
    }
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {
    /* 更改条数 */
    handleSizeChange(val) {
      this.searchParams[this.pageName[1]] = val
      this.$emit('searchList')
      /*console.log(`每页 ${val} 条`)*/
    },
    /* 换页 */
    changePage(page) {
      this.searchParams[this.pageName[0]] = page
      this.$emit('searchList')
      this.$nextTick(() => {
        if (this.$parent.$refs.table) {
          this.$parent.$refs.table.bodyWrapper.scrollTop = 0
        }
      })
    }
  }
}
</script>

<style lang="less"></style>
